<template>
  <div class="goods-category-list-page">

    <div class="table-field">
      <div class="btns-fun-field">
      <el-button  type="primary" @click.prevent="showAddEditDialog"  :icon="Plus">
        新增商品分类
      </el-button>
    </div>
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        v-loading="tableLoading"
      >
        <el-table-column prop="id" label="id" width="220" />
        <el-table-column prop="name" label="商品分类名" width="160" />
        <el-table-column prop="createTime" label="创建时间" width="240" />
        <el-table-column label="操作" min-width="220px">
          <template #default="scope">
            <el-button
              v-if="scope.row.id!=1"
              type="success"
              size="small"
              @click.prevent="showAddEditDialog(scope.row, 2)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click.prevent="showRemoveDialog(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-field">
      <el-pagination
        v-model:current-page="formData.pageIndex"
        v-model:page-size="formData.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="formData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    </div>

    <el-dialog
      v-if="addDialogVisible"
      v-model="addDialogVisible"
      :title="addEditForm.title"
      width="550px"
    >
      <div style="padding-right: 50px">
        <el-form
          :model="addEditForm"
          :rules="addEditRules"
          ref="addEditRef"
          :label-width="120"
        >
          <el-form-item label="分类名称" prop="name">
            <el-input
              v-model="addEditForm.name"
              autocomplete="off"
              placeholder="请输入商品分类名称"
            />
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input-number
              :min="0"
              :max="99"
              v-model="addEditForm.sort"
              autocomplete="off"
              placeholder="请输入排序值"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="startAddGoodsCategory"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-if="removeDialogVisible"
      v-model="removeDialogVisible"
      title="删除商品分类"
      width="400px"
    >
      <span>确定要删除当前商品分类？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="removeDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="startremoveGoodsCategory"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import {
  getGoodsCategoryPagination,
  addGoodsCategory,
  removeGoodsCategory,
  updateGoodsCategory
} from "@/api/goods-manage.api";
import { Plus } from "@element-plus/icons-vue";
import {  FormInstance,ElMessage } from "element-plus";
const formData = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0,
});


const removeDialogVisible = ref(false);
const addDialogVisible = ref(false);
const addEditRef = ref<FormInstance>();
const addEditForm = reactive({
  id: null,
  name: "",
  parentId: 0,
  level: 1,
  sort: 0,
  disabled: false,
  title: "",
  permissionList: [],
});
const addEditRules = reactive({
  name: [
    { required: true, message: "请输入商品分类名", trigger: "blur" },
    { min: 1, max: 30, message: "长度为1~30位", trigger: "blur" },
  ],
});

//获取商品分类权限列表


const showAddEditDialog = (item: any, type: number) => {
  //新增商品分类
  if (item.target) {
    addEditForm.id = null;
    addEditForm.name = "";
    addEditForm.parentId = 0;
    addEditForm.level = 1;
    addEditForm.sort = 0;
    addEditForm.disabled = false;
    addEditForm.title = "新增商品分类";
    addDialogVisible.value = true;
    return;
  }

  addEditForm.id = item.id;
  addEditForm.name = item.name;
  addEditForm.sort = item.sort;
  addEditForm.parentId = item.parentId;
  addEditForm.level = item.level;
  //编辑
  addEditForm.title = "编辑商品分类";
  addEditForm.disabled = false;
  addDialogVisible.value = true;
};



const tableLoading = ref(false);
const tableData = ref([]);

const curSelectRow = ref({id: ''});
const showRemoveDialog = (item: any) => {
  removeDialogVisible.value = true;
  curSelectRow.value = item;
  console.log("item: ", item);
};

const startremoveGoodsCategory = () => {

  let id = curSelectRow.value.id;
  removeGoodsCategory([id])
    .then((res) => {
      console.log("success~~~~~",res);
      removeDialogVisible.value = false;
      ElMessage({
        message: "商品分类删除成功",
        type: "success",
      });
      getDataList();
    })
    .catch((err) => {
      removeDialogVisible.value = false;
      ElMessage({
         message: err.msg || err,
        type: "error",
      });
    });
};


const startAddGoodsCategory = () => {
  console.log("...")
  let formData = {
    name: addEditForm.name,
    sort: addEditForm.sort,
    parentId: addEditForm.parentId,
    level: addEditForm.level
  };

  if (!addEditRef.value) return;
  addEditRef.value.validate((valid ) => {
    if (valid) {
      if (addEditForm.id) {
          updateGoodsCategory({
            ...formData,
            id: addEditForm.id,
          })
            .then((res) => {
              console.log(res)
              addDialogVisible.value = false;
              ElMessage({
                message: "商品分类修改成功",
                type: "success",
              });
              getDataList();
            })
            .catch((err) => {
              ElMessage({
                message: err.msg || err,
                type: "error",
              });
            });
          return;
      }

      addGoodsCategory(formData)
        .then((res) => {
          console.log(res)
          addDialogVisible.value = false;
          ElMessage({
            message: "商品分类新增成功",
            type: "success",
          });
          getDataList();
        })
        .catch((err) => {
          ElMessage({
             message: err.msg || err,
            type: "error",
          });
        });
    }
  });
};

const handleSizeChange = (value: number) => {
  console.log("handleSizeChange...", value);
  formData.pageSize = value;
  getDataList();
};

const handleCurrentChange = (value: number) => {
  console.log("handleCurrentChange...", value);
  formData.pageIndex = value;
  getDataList();
};

const getDataList = () => {
  tableLoading.value = true;
  getGoodsCategoryPagination({
    pageSize: formData.pageSize,
    pageIndex: formData.pageIndex,
  })
    .then(function (res: any) {
      
      tableLoading.value = false;
      console.log(".......................");
      console.log(res);
      console.log(".......................");
      tableData.value = res.list || [];
      formData.total = Number(res.total);
    })
    .catch((error) => {
      console.log(error);
      tableLoading.value = false;
    });
};


onMounted(() => {
  getDataList();
});
</script>
<style lang="scss" scoped>
@import "./GoodsCategory.scss"
</style>
